<template>
  <div id="courseware-management" class="container">
    <table-filter>
      <el-input
        v-model="apiSetting.data.username"
        placeholder="请输入学生姓名"
        clearable
      />
      <el-input
        v-model="apiSetting.data.organizename"
        placeholder="请输入班级名称"
        clearable
      />
      <el-button plain type="warning" @click="search">查询</el-button>
    </table-filter>
    <data-table
      ref="dtb"
      :sort-column="sortColumn"
      :api-setting="apiSetting"
      pagination
    >
      <!--<el-table-column
        fixed
        prop="userId"
        label="ID"
        width="100"
        sortable
        show-overflow-tooltip
      />-->
      <el-table-column
        prop="usercode"
        label="账号"
        show-overflow-tooltip
      />
      <el-table-column
        prop="username"
        label="姓名"
        show-overflow-tooltip
      />
      <el-table-column
        prop="organizename"
        label="班级"
        sortable
        show-overflow-tooltip
      />
      <el-table-column
        prop="counts"
        label="答题数"
        sortable
        show-overflow-tooltip
      />
      <el-table-column label="正确率">
        <template slot-scope="{ row: { correctcount, counts } }">
          <template v-if="counts">
            {{ ((correctcount / counts) * 100).toFixed(2) + "%" }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="lasttime"
        label="最近一次练习时间"
        width="160"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          {{ row.lasttime | formatterDate }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="查看分析" width="100">
        <template v-if="row.counts" slot-scope="{ row }">
          <el-button
            class="warning"
            @click="viewAnalysis(row)"
            type="text"
            size="small"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </data-table>
    <el-dialog
      destroy-on-close
      @close="chartOption = null"
      :visible.sync="visible"
      width="900px"
      center
      title="练习错题分析"
    >
      <chart v-if="chartOption" height="500px" :option="chartOption"></chart>
    </el-dialog>
  </div>
</template>

<script>
import dtb from "../../../mixins/refs/dtb";
import dialog from "../../../mixins/component/dialog";
import tbSearch from "@/mixins/dataTable/tbSearch";

export default {
  name: "index",
  mixins: [tbSearch, dtb, dialog],
  data() {
    return {
      apiSetting: {
        method: "post",
        url: "/sys/exercise/getExerciseList",
        data: {
          organizename: "",
          username: ""
        }
      },
      sortColumn: ["userId", "organizename", "counts", "lasttime"],
      chartOption: null,
      showAnalysisDialog: false
    };
  },
  methods: {
    viewAnalysis({ userId }) {
      this.axios
        .get(`/sys/exercise/getSubJectProportion/${userId}`)
        .then(res => {
          if (res.length) {
            this.visible = true;
            this.$nextTick(() => {
              this.renderChart(res);
            });
          }
        });
    },
    renderChart(data) {
      const labelOption = {
        show: true,
        position: "insideBottom",
        distance: "15",
        align: "left",
        verticalAlign: "middle",
        rotate: 90,
        formatter: "{c}  {name|{a}}",
        fontSize: 16,
        rich: {
          name: {
            textBorderColor: "#fff"
          }
        }
      };
      const chapterData = [];
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < data[i].chapterList.length; j++) {
          const chapter = data[i].chapterList[j];
          const arr = new Array(data.length);
          // arr[i] = chapter.counts * 100;
					arr[i] = chapter.counts
          chapterData.push({
            name: chapter.chapterName,
            type: "bar",
            barGap: 0,
            data: arr,
            label: labelOption,
            xAxisIndex: i
          });
        }
      }
      const xAxis = [];
      for (let i = 0; i < data.length; i++) {
        const xItem = [];
        for (let j = 0; j < data.length; j++) xItem[j] = "";
        xItem[i] = data[i].subName;
        xAxis.push({
          type: "category",
          axisTick: { show: false },
          position: "bottom",
          data: xItem
        });
      }
      this.chartOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: function(data) {
						return data
              .filter(item =>item.data)
              .map(({ seriesName, data }) => `${seriesName}:${data} (道)`)
              .join("</br>");
          }
        },
        xAxis,
        yAxis: [
          {
            type: "value"
          }
        ],
        series: chapterData
      };
		
    }
  }
};
</script>

<style scoped></style>
